<template>
	<div class="toast">
		<div class="toast-content">
			{{ message }}
		</div>
	</div>
</template>

<script lang="ts" setup>
interface Props {
	message: string
	duration?: number
}

const { message, duration = 1500 } = defineProps<Props>()

// 移除弹窗
onMounted(() => {
	const el: HTMLElement = getCurrentInstance()?.proxy?.$el
	const timer = setTimeout(() => {
		;(el?.parentNode as HTMLElement)?.remove()
		clearTimeout(timer)
	}, duration)
})
</script>

<style>
.toast {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #333;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	z-index: 9999;
	animation: bounce-in 0.3s;
	transform-origin: left top;
}

@keyframes bounce-in {
	0% {
		transform: scale(0.8) translate(-50%, -50%);
	}

	50% {
		transform: scale(1.2) translate(-50%, -50%);
	}

	100% {
		transform: scale(1) translate(-50%, -50%);
	}
}
</style>
